<template>
  <div class="goods">
    <div class="scroll-nav-wrapper">
      <cube-scroll-nav
        :side="true"
        :data="goods"
        :options="scrollOptions"
        v-if="goods.length"
      >
        <template #bar="{labels,current}">
          <cube-scroll-nav-bar
            direction="vertical"
            :labels="labels"
            :txts="barTxts"
            :current="current"
          >
            <template #default="{txt}">
              <div class="text">
                <support-ico
                  v-if="txt.type >= 1"
                  :size="3"
                  :type="txt.type"
                ></support-ico>
                <span>{{ txt.name }}</span>
                <span class="num" v-if="txt.count">
                  <bubble :num="txt.count"></bubble>
                </span>
              </div>
            </template>
          </cube-scroll-nav-bar>
        </template>
        <cube-scroll-nav-panel
          v-for="good in goods"
          :key="good.name"
          :label="good.name"
          :title="good.name"
        >
          <ul>
            <li
              class="food-item border-1px"
              v-for="(food, index) of good.foods"
              :key="index"
              @click="selectFood(food)"
            >
              <div class="icon">
                <img width="57" height="57" :src="food.icon" />
              </div>
              <div class="content">
                <h2 class="name">{{ food.name }}</h2>
                <p class="desc" v-if="food.description">
                  {{ food.description }}
                </p>
                <div class="extra">
                  <span class="count">月售{{ food.sellCount }}份</span>
                  <span>好评率{{ food.rating }}%</span>
                </div>
                <div class="price">
                  <span class="now">￥{{ food.price }}</span>
                  <span class="old" v-show="food.oldPrice">
                    ￥{{ food.oldPrice }}
                  </span>
                </div>
                <div class="cart-control-wrapper">
                  <cart-control @add="onAdd" :food="food"></cart-control>
                </div>
              </div>
            </li>
          </ul>
        </cube-scroll-nav-panel>
      </cube-scroll-nav>
    </div>
    <div class="shop-cart-wrapper">
      <shop-cart
        ref="shopCart"
        v-if="showShopCart"
        :select-foods="selectFoods"
        :delivery-price="seller.deliveryPrice"
        :min-price="seller.minPrice"
      ></shop-cart>
    </div>
  </div>
</template>

<script>
import { getGoods } from 'api/index.js'
import SupportIco from 'common/icon/supportIco'

import CartControl from './components/cartControl'
import ShopCart from './components/shopCart'
import Bubble from './components/bubble'

export default {
  name: 'goods',
  props: {
    data: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      goods: [],
      selectedFood: {},
      scrollOptions: {
        click: false,
        directionLockThreshold: 0,
      },
    }
  },
  computed: {
    showShopCart() {
      return this.data.seller.deliveryPrice
    },
    seller() {
      return this.data.seller
    },
    selectFoods() {
      let foods = []
      this.goods.forEach((good) => {
        good.foods.forEach((food) => {
          if (food.count) {
            foods.push(food)
          }
        })
      })
      return foods
    },
    barTxts() {
      return this.goods.map((good) => {
        const { type, name, foods } = good
        const count = foods.reduce((count, food) => {
          return (count += food.count || 0)
        }, 0)
        return { type, name, count }
      })

      // let ret = []
      // this.goods.forEach((good) => {
      //   const { type, name, foods } = good
      //   let count = 0
      //   foods.forEach((food) => {
      //     count += food.count || 0
      //   })
      //   ret.push({
      //     type,
      //     name,
      //     count,
      //   })
      // })
      // return ret
    },
  },
  methods: {
    fetch() {
      if (!this.fetched) {
        this.fetched = true
        getGoods({ id: this.seller.id }).then((data) => {
          this.goods = data.goods
        })
      }
    },
    selectFood(food) {
      this.selectedFood = food
      this._showFood()
      this._showShopCartSticky()
    },
    onAdd(target) {
      this.$refs.shopCart.dropBall(target)
    },
    _showFood() {
      this.foodComp =
        this.foodComp ||
        this.$createFood({
          $props: {
            food: 'selectedFood',
          },
          $events: {
            add: (target) => {
              this.shopCartStickyComp.dropBall(target)
            },
            leave: () => {
              this._hideShopCartSticky()
            },
          },
        })
      this.foodComp.show()
    },
    _showShopCartSticky() {
      this.shopCartStickyComp =
        this.shopCartStickyComp ||
        this.$createShopCartSticky({
          $props: {
            selectFoods: 'selectFoods',
            deliveryPrice: this.seller.deliveryPrice,
            minPrice: this.seller.minPrice,
            fold: true,
          }
        })
      this.shopCartStickyComp.show()
    },
    _hideShopCartSticky() {
      this.shopCartStickyComp.hide()
    },
  },
  components: {
    Bubble,
    SupportIco,
    CartControl,
    ShopCart
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/base.stylus';
@import '~styles/mixin.stylus';

.goods {
  position: relative;
  // text-align: left;
  height: 100%;

  // display: flex;
  // flex-direction: column;
  // overflow: hidden;
  .scroll-nav-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 48px;
    width: 100%;

    // flex: 1;
    // overflow: hidden;
    >>> .cube-scroll-nav-bar {
      width: 80px;
      white-space: normal;
      overflow: hidden;
    }

    >>> .cube-scroll-nav-bar-item {
      display: flex;
      align-items: center;
      padding: 0 12px;
      height: 56px;
      line-height: 14px;
      font-size: 12px;
      background: #f3f5f7;

      .text {
        flex: 1;
        position: relative;
      }

      .num {
        position: absolute;
        right: -8px;
        top: -10px;
      }

      .support-ico {
        display: inline-block;
        vertical-align: top;
        margin-right: 4px;
      }
    }

    >>> .cube-scroll-nav-bar-item_active {
      background: #fff;
      color: #333;
    }

    >>> .cube-scroll-nav-panel-title {
      padding-left: 14px;
      height: 26px;
      line-height: 26px;
      border-left: 2px solid #d9dde1;
      font-size: 12px;
      color: #666;
      background: #f3f5f7;
    }

    .food-item {
      display: flex;
      position: relative;
      margin: 18px;
      padding-bottom: 18px;
      border-1px(rgba(7, 17, 27, 0.1));

      &:last-child {
        border-none();
        margin-bottom: 0;
      }

      .icon {
        flex: 0 0 57px;
        margin-right: 10px;

        img {
          height: auto;
        }
      }

      .content {
        flex: 1;

        .name {
          margin: 2px 0 8px;
          color: rgb(7, 17, 27);
          line-height: 14px;
          font-size: 14px;
        }

        .desc, .extra {
          line-height: 13px;
          font-size: 10px;
          color: rgb(147, 153, 159);
        }

        .desc {
          margin-bottom: 8px;
          white-space: pre-wrap;
        }

        .extra {
          .count {
            margin-right: 10px;
          }
        }

        .price {
          font-weight: 700;
          line-height: 24px;

          .now {
            margin-right: 8px;
            font-size: 14px;
            color: rgb(240, 20, 20);
          }

          .old {
            vertical-align: top;
            text-decoration: line-through;
            color: rgb(143, 153, 159);
            font-size: 10px;
            color: #999;
          }
        }
      }

      .cart-control-wrapper {
        position: absolute;
        right: 0;
        bottom: 12px;
      }
    }
  }

  .shop-cart-wrapper {
    position: absolute;
    left: 0;
    bottom: 0px;
    z-index: 1;
    width: 100%;
    height: 48px;
  }
}
</style>
